import React from 'react';
import { CalendarIcon, ClockIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
export const LatestArticles = () => {
  const articles = [{
    id: 'a1',
    title: 'How to Choose the Perfect Crib Mattress for Your Baby',
    excerpt: "Learn what materials are safest and how firmness affects your baby's sleep quality and development.",
    image: 'https://images.unsplash.com/photo-1556010334-d6ed191db491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'June 12, 2023',
    readTime: '7 min read',
    category: 'Sleep'
  }, {
    id: 'a2',
    title: 'The Ultimate Guide to Baby-Proofing Your Home',
    excerpt: "From cabinet locks to outlet covers, here's everything you need to create a safe environment for your curious crawler.",
    image: 'https://images.unsplash.com/photo-1556784344-ad913a86b2c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'June 5, 2023',
    readTime: '9 min read',
    category: 'Safety'
  }, {
    id: 'a3',
    title: 'Best High Chairs of 2023: Tested by Real Parents',
    excerpt: 'We put the top-rated high chairs through rigorous testing with real families to find the best options for every budget.',
    image: 'https://images.unsplash.com/photo-1596461010467-ac432e9058c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 28, 2023',
    readTime: '8 min read',
    category: 'Feeding'
  }];
  return <section className="py-16">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10">
        <div>
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-2">
            Latest Articles
          </h2>
          <p className="font-inter text-gray-600">
            Expert advice and in-depth guides for every stage of parenting
          </p>
        </div>
        <Link to="/articles" className="mt-4 md:mt-0 text-terracotta hover:text-terracotta/80 font-medium transition-colors">
          View all articles
        </Link>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {articles.map(article => <article key={article.id} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <Link to={`/articles/${article.id}`} className="block">
              <div className="aspect-[16/9] w-full">
                <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
              </div>
              <div className="p-5">
                <div className="flex items-center mb-3">
                  <span className="inline-block px-2.5 py-0.5 bg-green/20 text-green rounded-full text-xs font-medium">
                    {article.category}
                  </span>
                </div>
                <h3 className="font-nunito font-semibold text-lg mb-2 line-clamp-2">
                  {article.title}
                </h3>
                <p className="text-gray-600 text-sm mb-4 line-clamp-3">
                  {article.excerpt}
                </p>
                <div className="flex items-center text-xs text-gray-500">
                  <span className="flex items-center">
                    <CalendarIcon size={14} className="mr-1" />
                    {article.date}
                  </span>
                  <span className="mx-2">•</span>
                  <span className="flex items-center">
                    <ClockIcon size={14} className="mr-1" />
                    {article.readTime}
                  </span>
                </div>
              </div>
            </Link>
          </article>)}
      </div>
      <div className="mt-10 bg-terracotta/10 rounded-lg p-6 border border-terracotta/20">
        <div className="flex flex-col md:flex-row items-center justify-between">
          <div className="mb-4 md:mb-0 md:mr-6">
            <h3 className="font-nunito font-semibold text-xl mb-2">
              Join the Cub Club Community
            </h3>
            <p className="text-gray-600 text-sm">
              Get exclusive guides, checklists, and expert advice delivered
              straight to your inbox.
            </p>
          </div>
          <div className="w-full md:w-auto">
            <form className="flex flex-col sm:flex-row gap-3">
              <input type="email" placeholder="Your email address" className="px-4 py-2.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-terracotta/50 w-full" required />
              <button type="submit" className="px-5 py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium whitespace-nowrap">
                Subscribe
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>;
};